<template>
  <main class="app-main">
    <transition name="fade-transform" mode="out-in">
      <router-view class="router-view-container" />
    </transition>
  </main>
</template>

<script setup>
// 脚本逻辑保持不变
</script>

<style scoped>
.app-main {
  flex: 1;
  padding: 0 20px 20px; /* 顶部0，左右20，底部20 */
  background-color: #f5f7fa;
  overflow: auto;
  margin-top: -8px; /* 向上微调 */
}

.router-view-container {
  padding-top: 12px; /* 单独控制内容顶部间距 */
}

.fade-transform-leave-active {
  transition: all 0.2s ease-out;
}

.fade-transform-enter-active {
  transition: all 0.2s ease-in;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateY(-5px); /* 改为垂直方向动画 */
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateY(5px);
}
</style>